<template>
	<view class="tab-bar-wrap">
		<view class="tab-bar">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="un-tab" v-if="props.current!=index+1" @tap="bindTab(item)">
					<image :src="item.iconPath" mode=""></image>
				</view>
				<view class="tab"  v-if="props.current==index+1" @tap="bindTab(item)">
					<image :src="item.selectedIconPath" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>

	

</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps(['current'])
	
	const list = ref([{
			"pagePath": "/pages/index/index",
			"text": "首页",
			"iconPath": "/static/tabBar-home.png",
			"selectedIconPath": "/static/tabBar-home-act.png"
		},
		{
			"pagePath": "/pages/member/member",
			"text": "产品",
			"iconPath": "/static/tabBar-member.png",
			"selectedIconPath": "/static/tabBar-member-act.png"
		},
		{
			"pagePath": "/pages/MY/MY",
			"text": "我的",
			"iconPath": "/static/tabBar-my.png",
			"selectedIconPath": "/static/tabBar-my-act.png"
		}
	])
	const bindTab = (item)=>{
		uni.switchTab({
			url:item.pagePath
		})
	}
</script>

<style scoped lang="scss">
	.tab-bar-wrap{
		height: calc(env(safe-area-inset-bottom) + 123rpx);
	}
	.tab-bar {
		
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 123rpx);
		background: #FFFFFF;
		box-shadow: 0px -23rpx 67rpx 0px rgba(60,66,78,0.06);
		border-radius: 23rpx 23rpx 0 0;
		display: flex;
		justify-content: space-around;
		position: fixed;
		align-items: center;
		bottom: 0;
		.tab{
			width: 173rpx;
			height: 77rpx;
			background: rgba(67,120,255,0.1);
			border-radius: 46rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 3s all ease;
			image{
				display: block;
				width: 58rpx;
				height: 58rpx;
			}
			text{
				display: block;
				color: #316BFF;
				font-size: 23rpx;
				font-weight: 500;
			}
		}
		.un-tab{
			width: 173rpx;
			height: 77rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				display: block;
				width: 58rpx;
				height: 58rpx;
			}
		}
	}
</style>